<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
</head>

<body class="">
	<div class="app" id='app' style="display:none" v-show="true">
		<div class="app-content list list-gkls">
			<ul>
				<li v-for="item of items">
					<div class="dl">
						<div class="news-img" :style="'background:url(\''+ imageBasePath + item.courseImg +'\') no-repeat center center;background-size:cover;'"></div>
					</div>
					<div class="dm">
						<div class="l1">
							<span class="gk-title">
							{{item.coursewareTitle}}
						</span>
						</div>
						<div class="l2">
							<span>已看至{{item.rateStr}}%</span>
						</div>
					</div>
					<div class="dr" v-if="item.status < 2" @click="openLesson(item)">
						<img src="../../image/con-play.png" alt="">
						<span>继续播放</span>
					</div>
					<div class="dr" v-if="item.status === 2" @click="openLesson(item)">
						<img src="../../image/play2.png" alt="">
						<span>重新播放</span>
					</div>
				</li>
				<div v-if="loaded" @click="toTop()" class="no_more" key="no_more">没有更多了，点击回到顶部</div>
			</ul>
			<transition name="fade">
				<spinner v-if="loading"></spinner>
			</transition>
			</div>
		</div>
		<script type="text/javascript" src="../../script/api.js"></script>
		<script type="text/javascript" src="../../script/vue.min.js"></script>
		<script type="text/javascript" src="../../script/common.js"></script>
		<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					items: [],
					loading: false,
					loaded: false,
					pageNum: 1,
					pageSize: 10,
					isLastPage: false
				},
				mounted: function() {
					var $this = this;
					apiready = function() {
						api.parseTapmode();
						$this.init();
						$this.getList();

						onScrollToBottom(function () {
							if ($this.loaded) return;
							$this.getList()
						})
						api.setRefreshHeaderInfo({
							bgColor: '#f5f5f9',
							textColor: '#aaa',
							textDown: '下拉刷新...',
							textUp: '松开刷新...'
						}, function(ret, err) {
							$this.pageNum = 1;
							$this.loaded = false;
							$this.isLastPage = false;
							$this.getList(true)
						});
					}
				},
				methods: {
					init: function() {

					},
					getList: function(refresh) {
						var $this = this;
						if ($this.loading) return;
						$this.loading = true;
						post('/client/user/learnHistory', {
							'pageNum': $this.pageNum,
							'pageSize': $this.pageSize
						}, function(ret) {
							if (!ret.isSuccess) {
								msgUtil.toast({
									msg: ret.message
								});
								return;
							}
							if (refresh) {
								api.refreshHeaderLoadDone();
								$this.items = [];
							}
							$this.loading = false;
							ret.data.list.forEach(function(item) {
								$this.items.push(item)
							});
							$this.pageNum++;
							if (ret.data.isLastPage) {
								$this.loaded = true;
								$this.isLastPage = true;
								return;
							}
						});
					},
					openLesson: function(item) {
						openWin('../study/study_win', {
							courseId: item.courseId,
							coursewareId:item.coursewareId
						});
					},
					toTop: function() {
						api.pageUp({'top': true}, function(){})
					}
				}
			});
		</script>
</body>

</html>
